VIDSOL-143: Implement configuration file, VIDSOL-195: Resolve camera LED bug turning on when not publishing video #205

cpettet · 2025-08-18T18:51:16Z

What is this PR doing?

Implements configurable features in the VERA application. Documentation will be in a follow-up PR as this one is already long in the tooth. Configuration is handled through a config.json file that can be moved to the frontend/public folder; there's an example in the base directory, config.example.json. Changes to the config file will be reflected immediately in most cases, but some rooms will need to be re-joined to take effect (ie setting the default layout, audio on join, etc.).

I dislike combining tickets, but the issue for the camera LED remaining on when the publisher was not publishing video was difficult to decouple from the configuration API, so it's resolved here, too. It's done by moving the BackgroundPublisherProvider up the tree, removing the need to create --> destroy --> recreate --> destroy it when moving from the waiting room to the meeting room. This simplifies the flow so it's easier to understand, too. 🙌

How should this be manually tested?

Testing configuration

checkout this branch
copy the example config file to the appropriate directory cp config.example.json frontend/public/config.json
for each of the configurable features, check it does what the config describes
- allowBackgroundEffects - enables/disables the background effects buttons
- allowCameraControl - enables/disables the video toggle (waiting and meeting room)
- allowVideoOnJoin - disables video on joining meeting room
- defaultResolution - changes the default resolution (recommend using 320x180 to see the difference 😬)
- allowAdvancedNoiseSuppression - displays the ANS toggle
- allowAudioOnJoin - disables audio on joining meeting room
- allowMicrophoneControl - enables/disables the video toggle (waiting and meeting room)
- allowDeviceSelection - allows device selection on waiting room or on meeting room
- defaultLayoutMode - changes default layout on joining room (use active-speaker or grid)
- allowSomeFeature - whether the button for the feature is shown or not
- showParticipantList - whether the participant list button is shown and whether the hidden participants tile opens the participant list
delete the config file rm -rf frontend/public/config.json
from the landing page, confirm all settings are back to their defaults

Testing bugfix

go to waiting room
disable video
notice LED is not lit up
enter meeting room
notice LED is not lit up
enable video
notice publisher and background publisher have video and LED is lit up

What are the relevant tickets?

A maintainer will add this ticket number.

Resolves VIDSOL-143 and VIDSOL-195

Checklist

[✅] Branch is based on develop (not main).
[ ] Resolves a Known Issue.
[ ] If yes, did you remove the item from the docs/KNOWN_ISSUES.md?
[ ] Resolves an item reported in Issues.
If yes, which issue? Issue Number?

cpettet · 2025-09-18T22:30:17Z

SonarCloud failures look to be unrelated to this PR - code duplication on frontend/src/components/MeetingRoom/BackgroundEffectsLayout/BackgroundEffectsLayout.tsx, frontend/src/components/WaitingRoom/BackgroundEffects/BackgroundEffectsLayout/BackgroundEffectsLayout.tsx, and frontend/src/Context/BackgroundPublisherProvider/useBackgroundPublisher/useBackgroundPublisher.tsx

Copilot

Pull Request Overview

This PR implements a configurable features system for the VERA application using a config.json file. The configuration allows administrators to enable/disable various UI elements and behaviors without code changes, including camera/microphone controls, background effects, device selection, layout modes, and meeting room buttons.

Key changes:

Adds a new ConfigProvider context to manage application configuration
Implements config loading from frontend/public/config.json with fallback defaults
Updates components to conditionally render based on configuration settings

Reviewed Changes

Copilot reviewed 54 out of 56 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
`config.example.json`	Example configuration file showing all available settings
`frontend/src/Context/ConfigProvider/`	New configuration context and hooks for managing app settings
`frontend/src/hooks/useConfigContext.ts`	Hook to access configuration context
`frontend/src/types/session.ts`	Moved `LayoutMode` type to shared location
Various component files	Updated to conditionally render based on configuration

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

...nd/src/Context/BackgroundPublisherProvider/useBackgroundPublisher/useBackgroundPublisher.tsx

Copilot · 2025-09-19T15:55:14Z

frontend/src/components/MeetingRoom/DeviceControlButton/DeviceControlButton.tsx

+        <Tooltip title={tooltipTitle} aria-label={t('devices.settings.ariaLabel')}>
+          <div>
+            <IconButton
+              onClick={handleDeviceStateChange}
+              disabled={isButtonDisabled}
+              edge="start"
+              aria-label={isAudio ? 'microphone' : 'camera'}
+              size="small"
+              className="m-[3px] size-[50px] rounded-full shadow-md"
+            >
+              {renderControlIcon()}
+            </IconButton>
+          </div>
        </Tooltip>


[nitpick] The extra <div> wrapper around the IconButton appears to be added only to make the tooltip work with disabled buttons. Consider using a more semantic approach or adding a comment explaining why this wrapper is necessary.

Copilot · 2025-09-19T15:55:15Z

frontend/src/components/MeetingRoom/Toolbar/Toolbar.tsx

    }
    disconnect();
-  }, [disconnect]);
+    destroyBackgroundPublisher();


[nitpick] The destroyBackgroundPublisher call in the disconnect handler should include error handling, as destroying publishers can potentially throw exceptions that would prevent the disconnect from completing.

Suggested change

destroyBackgroundPublisher();

try {

destroyBackgroundPublisher();

} catch (error) {

console.error('Failed to destroy background publisher:', error);

}

behei-vonage

impressive job 👏 mostly left some nits and a few suggestions. let me know what you think! 🙏

frontend/src/App.spec.tsx

...nd/src/Context/BackgroundPublisherProvider/useBackgroundPublisher/useBackgroundPublisher.tsx

frontend/src/Context/ConfigProvider/useConfig/useConfig.tsx

frontend/src/components/MeetingRoom/ReduceNoiseTestSpeakers/ReduceNoiseTestSpeakers.tsx

frontend/src/components/ScreenSharingButton/ScreenSharingButton.tsx

...components/WaitingRoom/BackgroundEffects/BackgroundEffectsButton/BackgroundEffectsButton.tsx

frontend/src/hooks/useConfigContext.ts

frontend/src/vite-env.d.ts

czoli1976

Some considerations about the nameing of the variables, defenitely a NIT

czoli1976 · 2025-09-22T11:28:56Z

config.example.json

@@ -0,0 +1,25 @@
+{
+  "videoSettings": {
+    "allowBackgroundEffects": true,


I suggest renaming it to "allowVideoEffects" because, while currently these effects apply only to the background, the same panel could potentially be used in the future for other effects (e.g., lighting correction, eye correction).

We discussed this as a team during design review and considered Visual Effects instead of Background Effects before deciding on this naming scheme. All of our components reference BackgroundEffects and everything is currently a background effect. Let's keep as-is for now, seems like premature optimization to rename this.

ok @cpettet !

config.example.json

OscarFava

Great work! I have just a few minor comments.

frontend/src/Context/ConfigProvider/useConfig/useConfig.tsx

frontend/src/components/MeetingRoom/DeviceControlButton/DeviceControlButton.tsx

OscarFava

Awesome work! I leave a minor suggestion!

frontend/src/utils/getControlButtonTooltip/getControlButtonTooltip.ts

behei-vonage

LGTM!

sonarqubecloud · 2025-09-24T16:36:22Z

Quality Gate passed

Issues
9 New issues
0 Accepted issues

Measures
0 Security Hotspots
97.9% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

OscarFava

LGTM!

behei-vonage

LGTM!

dwivedisachin · 2025-09-30T11:11:35Z

I tested the PR and overall it looks good, but I noticed a couple of things that seem a bit off:

If the camera or mic (or both) are disabled, why do we still request access to them?
When the camera/mic is disabled, having the option to select a device doesn’t feel intuitive.

Not sure if this is something we actually need to fix, but it stood out to me.

We might also want to add comments in the config.example.json file to clarify:

the resolutions we support (e.g., 1280x720) and the fallback to 1280x720 if we enter something else.
the layout modes we support (active-speaker, grid)

This would make it easier for others to understand the available options when configuring defaults.

cpettet · 2025-09-30T16:20:06Z

If the camera or mic (or both) are disabled, why do we still request access to them?

Oh, good catch. This would require a lot of rewiring. Could this be in a follow-up PR?

When the camera/mic is disabled, having the option to select a device doesn’t feel intuitive.

Yeah, this one is a little strange. We have a configurable prop for device selection, meetingRoomSettings.allowDeviceSelection, that is separate from videoSettings.allowCameraControl. Is it okay if we keep as-is? We could also rename allowCameraControl to something more intuitive. What do you think?

cpettet · 2025-09-30T16:20:51Z

The comments on usage will be in a separate PR. It should be this ticket: VIDSOL-165

dwivedisachin · 2025-09-30T16:38:01Z

Thanks @cpettet!! merging this PR.

cpettet force-pushed the cpettet/vidsol-143-config-file branch from d592f0b to 643099f Compare September 3, 2025 16:12

cpettet added 29 commits September 16, 2025 13:16

first things first

013ea86

working for some stuff

44c7ab0

some renaming

4260439

enable/disable camera

711f4b6

video resolution

2d027d9

less redundant

85fcbdc

..

69680ca

test fixes

e695b8d

should work on gha

26ebf42

that type

dc29859

revert and redo

335a47f

lint issues

46f745f

should be good?

4e30edd

should work on gha and local

a245d74

ans configurable

de1d224

test

dda6c9e

audio/video control button tests

cf5f406

fix lint

9b90d9d

fix tests

020364f

tests for config

7f4d686

enable-disable waiting room

9bef624

cleaner implementation

6e69991

audio and video on join

3142edc

background publisher taken care of

3269dca

configured control panel

0889143

fix that test

f4c15ab

too excited

587471c

participant-list

6170788

lint

3e10a68

not enough ../

e725537

cpettet requested a review from Copilot September 19, 2025 15:54

Copilot AI reviewed Sep 19, 2025

View reviewed changes

ghc suggests

39722fa

behei-vonage reviewed Sep 19, 2025

View reviewed changes

czoli1976 reviewed Sep 22, 2025

View reviewed changes

OscarFava requested changes Sep 22, 2025

View reviewed changes

frontend/src/Context/ConfigProvider/useConfig/useConfig.tsx Outdated Show resolved Hide resolved

frontend/src/components/MeetingRoom/DeviceControlButton/DeviceControlButton.tsx Show resolved Hide resolved

cpettet added 6 commits September 22, 2025 11:02

for the meeting room

96d8dbf

some nits

40c6585

single not double

170018e

helper instead

20d56e0

the great renaming

e71ad04

better config fetch handling

0a4bb74

OscarFava reviewed Sep 23, 2025

View reviewed changes

frontend/src/utils/getControlButtonTooltip/getControlButtonTooltip.ts Show resolved Hide resolved

missing jsdoc

5ab05b2

behei-vonage previously approved these changes Sep 23, 2025

View reviewed changes

simpler solution to solve the issue

c0d5791

cpettet dismissed behei-vonage’s stale review via c0d5791 September 24, 2025 16:28

cpettet changed the title ~~VIDSOL-143: Implement configuration file~~ VIDSOL-143, VIDSOL-195: Implement configuration file, Resolve camera LED bug turning on when not publishing video Sep 24, 2025

cpettet changed the title ~~VIDSOL-143, VIDSOL-195: Implement configuration file, Resolve camera LED bug turning on when not publishing video~~ VIDSOL-143: Implement configuration file, VIDSOL-195: Resolve camera LED bug turning on when not publishing video Sep 24, 2025

OscarFava approved these changes Sep 25, 2025

View reviewed changes

behei-vonage approved these changes Sep 25, 2025

View reviewed changes

dwivedisachin merged commit 2b366f5 into develop Sep 30, 2025
10 of 12 checks passed

dwivedisachin deleted the cpettet/vidsol-143-config-file branch September 30, 2025 16:38

VIDSOL-143: Implement configuration file, VIDSOL-195: Resolve camera LED bug turning on when not publishing video #205

VIDSOL-143: Implement configuration file, VIDSOL-195: Resolve camera LED bug turning on when not publishing video #205

Uh oh!

Conversation

cpettet commented Aug 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is this PR doing?

How should this be manually tested?

Testing configuration

Testing bugfix

What are the relevant tickets?

Checklist

Uh oh!

cpettet commented Sep 18, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Copilot AI Sep 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 19, 2025

Choose a reason for hiding this comment

Uh oh!

behei-vonage left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

czoli1976 left a comment

Choose a reason for hiding this comment

Uh oh!

czoli1976 Sep 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cpettet Sep 22, 2025

Choose a reason for hiding this comment

Uh oh!

czoli1976 Sep 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

OscarFava left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

OscarFava left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

behei-vonage left a comment

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented Sep 24, 2025

Quality Gate passed

Uh oh!

OscarFava left a comment

Choose a reason for hiding this comment

Uh oh!

behei-vonage left a comment

Choose a reason for hiding this comment

Uh oh!

dwivedisachin commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cpettet commented Sep 30, 2025

Uh oh!

cpettet commented Aug 18, 2025 •

edited

Loading

czoli1976 Sep 22, 2025 •

edited

Loading

dwivedisachin commented Sep 30, 2025 •

edited

Loading